<template>
  <div class="wrapper">
    <div class="tabel-div">
      <table class="tabel-class">
        <thead>
        <tr>
          <th>文章标题</th>
          <th>来源</th>
          <th>作者</th>
          <th>发布时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="data in dataList">
          <td>{{data.hotspotTitle}}</td>
          <td>{{data.hotspotSource}}</td>
          <td>{{data.hotspotAuthor}}</td>
          <td>{{data.itemcreateat}}</td>
          <td v-if="data.dataStatus === '8'">
            <a v-on:click="getChildrenHealthContent(data.itemcode)" href="javascript:void(0)">查看</a>
          </td>
          <td v-else>
            <a v-on:click="" href="javascript:void(0)">修改</a>
            <a href="javascript:void(0)">提交</a>
            <a v-on:click="removeChildrenHealth(data.itemCode)" href="javascript:void(0)">删除</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="">
      <div class="container large arowMain">
        <div class="pagination arow6">
          <ul>
            <li v-on:click="topPage()"><a href="javascript:void(0)">首页</a></li>
            <li v-on:click="lastPage()"><a href="javascript:void(0)"><</a></li>
            <li v-for="num in indexs" :class="{active:current_page===num}" @click="jumpPage(num)">
              <a href="javascript:void(0)">{{num}}</a>
            </li>
            <li v-on:click="nextPage()"><a href="javascript:void(0)"> > </a></li>
            <li v-on:click="bottomPage()"><a href="javascript:void(0)">尾页</a></li>
          </ul>
        </div>
        <div class="arow03">
          <input type="text" id="select-state" v-model="selectStateValue" class="input-class" placeholder="10条/页"
                 readonly
                 @blur="ul_hide" @focus="ul_show"/>
          <ul class="showUlleft" id="listsShowUlleft" v-if="show_ul" v-on:click="selectState">
            <li><a href="javascript:void(0)">10条/页</a></li>
            <li><a href="javascript:void(0)">20条/页</a></li>
            <li><a href="javascript:void(0)">30条/页</a></li>
            <li><a href="javascript:void(0)">50条/页</a></li>
            <li><a href="javascript:void(0)">100条/页</a></li>
          </ul>
        </div>
        <div class="arow03">
          <label>跳转至</label>
        </div>
        <div class="arow03">
          <input v-on:change="getChildrenHealth" type="text" v-model="current_page" class="input-class"
                 placeholder="0"/>
        </div>
        <div class="arow03 wei-page">
          <label>页</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ChildrenHealthBody",
        data() {
            return {
                current_page: 1, //当前页
                pages: 50, //总页数
                changePage: '',//跳转页
                pageSum: 10,//每页大小
                nowIndex: 0,
                show_ul: false,
                selectStateValue: '',
                dataList: []
            }
        },
        mounted() {
            this.getChildrenHealth();
            this.getPages();
        },
        computed: {
            show: function () {
                return this.pages && this.pages !== 1
            }
            ,
            efont: function () {
                if (this.pages <= 7) return false;
                return this.current_page > 5
            }
            ,
            indexs: function () {
                var left = 1,
                    right = this.pages,
                    ar = [];
                if (this.pages >= 7) {
                    if (this.current_page > 5 && this.current_page < this.pages - 4) {
                        left = Number(this.current_page) - 3;
                        right = Number(this.current_page) + 3;
                    } else {
                        if (this.current_page <= 5) {
                            left = 1;
                            right = 7;
                        } else {
                            right = this.pages;
                            left = this.pages - 6;
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left);
                    left++;
                }
                return ar;
            }
            ,
        },
        methods: {
            getChildrenHealth() {
                this.$http.get('http://localhost:80/getChildrenHealth?page=' + this.current_page + '&size=' + this.pageSum)
                    .then((res) => {
                        this.dataList = res.data.data;
                    })
            },
            jumpPage: function (id) {
                this.current_page = id;
                this.getChildrenHealth();
            },
            changePageClick: function (e) {
                console.log("#" + e.target)
            },
            nextPage: function () {
                if (this.current_page < this.pages) {
                    this.current_page++;
                    this.getChildrenHealth();
                }
            },
            lastPage: function () {
                if (this.current_page > 1) {
                    this.current_page--;
                    this.getChildrenHealth();
                }

            },
            topPage: function () {
                this.current_page = 1;
                this.getChildrenHealth();
            },
            bottomPage: function () {
                this.current_page = this.pages;
                this.getChildrenHealth();
            },
            ul_hide: function () {
                setTimeout(() => {
                    this.show_ul = !this.show_ul;
                }, 200);
            },
            ul_show: function () {
                this.show_ul = !this.show_ul;
            },
            selectState: function (e) {
                this.selectStateValue = e.target.text;
                this.pageSum = parseInt(this.selectStateValue);
                this.getPages();
                this.topPage();
            },
            getChildrenHealthContent(itemCode) {
                this.$http.get('http://localhost:80/getChildrenHealthContent?itemCode=' + itemCode)
                    .then((res) => {
                        console.log(res.bodyText);
                    })
            },
            reviveChildrenHealth(itemCode) {
                this.$http.get('http://localhost:80/reviveChildrenHealth?itemCode=' + itemCode)
                    .then((res) => {
                        console.log(res.bodyText);
                    })
            },
            removeChildrenHealth(itemCode) {
                this.$http.get('http://localhost:80/removeChildrenHealth?itemCode=' + itemCode)
                    .then((res) => {
                        console.log(res.bodyText);
                    })
            },
            getPages() {
                this.$http.get('http://localhost:80/getPages?size=' + this.pageSum)
                    .then((res) => {
                        this.pages = parseInt(res.bodyText);
                    })
            }
        }
    }
</script>

<style scoped>
  .tabel-div {
    width: 100%;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .tabel-class {
    width: 100%;
    /*border: 0;*/
    border-collapse: collapse;
  }

  .tabel-class > thead {
    background-color: #775637;
    color: white;

  }

  .tabel-class > thead > tr > th {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
    border: 0;
  }

  .tabel-class td {
    padding: 25px 0 20px 0;
    color: #775637;
  }

  .wrapper {
    width: 80%;
    margin: auto;
    padding: 0;
  }

  .showUlleft {
    background-color: white;
    /*text-indent: px;*/
    list-style: none;
    border: .3px gainsboro solid;
    width: 70px;
    position: relative;
  }

  .showUlleft > li:hover {
    background-color: #1E90FF;
  }

  .showUlleft > li {
    display: block;
    width: 100%;

  }

  .showUlleft > li > a {
    line-height: 1.3;
    font-size: 15px;
    display: block;

    text-decoration: none;
    color: #333333;
    text-align: left;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .arowMain {
    display: flex;
  }

  .arow1 {
    flex: 1;
  }

  .arow03 {
    flex: 0.5;
    line-height: 40px;
  }

  .wei-page {
    margin-left: 5px;
    text-align: left;
  }

  .arow6 {
    flex: 6;
    text-align: right;
  }

  .input-class {
    width: 60px;
    height: 38px;
    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    color: rgba(0, 0, 0, .85);
    border-radius: 2px;
    border-color: #eee;
    outline: none;
    display: block;
    padding-left: 10px;

  }

  /*///////////////*/
  .container {
    background: #fdfdfd;
    padding: 1rem;
    margin: 3rem auto;
    border-radius: 0.2rem;
    counter-reset: pagination;
    text-align: center;
  }

  .container:after {
    clear: both;
    content: "";
    display: table;
  }

  /*.container ul {*/
  /*width: 100%;*/
  /*}*/

  /*.large {*/
  /*width: 45rem;*/
  /*}*/
  .pagination {
    margin-right: 10px;
  }

  .pagination ul, li {
    list-style: none;
    display: inline;
    padding-left: 0px;
  }

  .pagination li {
    counter-increment: pagination;
  }

  .pagination li:hover a {
    color: #fdfdfd;
    background-color: #775637;
    border: solid 1px #775637;
  }

  .pagination li.active a {
    color: #fdfdfd;
    background-color: #775637;
    border: solid 1px #775637;
  }

  /*.pagination li:first-child a:after {*/
  /*content: "<";*/
  /*}*/

  /*.pagination li:nth-child(2) {*/
  /*counter-reset: pagination;*/
  /*}*/

  /*.pagination li:last-child a:after {*/
  /*content: ">";*/
  /*}*/

  .pagination li a {
    border: solid 1px #d6d6d6;
    border-radius: 0.2rem;
    color: #7d7d7d;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
  }

  .pagination li a:after {
    /*content: " " counter(pagination) " ";*/
    /*content: counter(pagination);*/
  }

  .large li a {
    /*display: none;*/
  }

  /*.large li:first-child a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:first-child a:after {*/
  /*content: "<";*/
  /*}*/

  /*.large li:nth-child(2) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-child(3) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-child(4) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-child(5) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-child(6) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-child(7) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-child(8) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:last-child a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:last-child a:after {*/
  /*content: ">";*/
  /*}*/

  /*.large li:nth-last-child(2) a {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-last-child(3) {*/
  /*display: inline-block;*/
  /*}*/

  /*.large li:nth-last-child(3):after {*/
  /*padding: 0 1rem;*/
  /*content: "...";*/
  /*}*/

</style>
